<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/heads.css">
  <link rel="stylesheet" href="/css/login.css">
</head>

<body>
  <div class="nav">
    <ul>
      <li class="pc">
        <a href="index.html">首页</a>
      </li>
      <li class="pc">
        <a href=""> 品牌历史</a>
        <div class="fen">
          <ul class="fen_en">
            <li><a href="index_story.html">一个美丽的故事</a> </li>
            <li>传承人的故事</li>
          </ul>
        </div>
      </li>
      <li class="pc">
        <a href="poins.html">产品中心</a>
        <div class="fen">
          <ul class="fen_en fen1">
            <li><a href=""><a href="poin_sj.html">三角钢琴</a></li>
            <li><a href="poin_ls.html">立式钢琴</a></li>
          </ul>
        </div>
      </li>
      <li class="pc">
        <a href="index_zt.html">展厅</a>
      </li>
      <a class="logo" href="#"></a>
      <li class="pc"><a href="new.html?page=1">新闻首页</a></li>
      <li class="pc">服务
        <div class="fen">
          <ul class="fen_en fen2">
            <li><a href="maintain.html">保养与维护</a></li>
            <li><a href="#">经销商查询</a></li>
          </ul>
        </div>
      </li>
      <li class="pc"><a href="">联系</a></li>
      <li class="pc"><a href="lodin.html">个人中心</a></li>
    </ul>
    <span class="ico">
      <em></em>
      <em></em>
      <em></em>
    </span>
  </div>
  <div class="navBou">
    <div>首页</div>
    <div>
      品牌历史
      <p><a href="">个美丽的故事</a></p>
      <p><a href="">传承人的故事</a></p>
    </div>
    <div>
      产品中心
      <p><a href="">三角钢琴</a></p>
      <p><a href="">立式钢琴</a></p>
    </div>
    <div><a href="index_zt.html">展厅</a></div>
    <div><a href="new.html">新闻首页</a></div>
    <div>服务
      <p><a href="">保养与维护</a></p>
      <p><a href="">经销商查询</a></p>
    </div>
  </div>
  <div class="login">
    <div class="login_en">
      <h2>注册账户</h2>
      <p>手机号</p>
      <input type="text" id="phone">
      <p>验证码</p>
      <div class="code">
        <input type="text">
        <button id="vali">获取验证码</button>
      </div>
      <p>密码</p>
      <div class="paw">
        <input type="password" id="upwd">
        <div class="eye"></div>
      </div>

      <button class="reg" id="regbtn">注册</button>
      <a class="log" href="lodin.html">已有账号</a>
      <p id="regp"></p>
      <p id="regwd"></p>
    </div>
    
    <div class="fo">
      <p><a href="#">账户升级请联系客服人员</a></p>
      <p>Pleyel © 2019 普雷叶乐器（上海）有限公司 沪ICP备18021165号-1</p>
    </div>
    
  </div>
  <script>
    let phone = document.getElementById('phone');
    let upwd = document.getElementById('upwd');
    let regbtn=document.getElementById('regbtn');
    let phoneval=phone.value;
    let upwdval=upwd.value;
    let regp=document.getElementById('regp')
    let regwd=document.getElementById('regwd')
    let vail=document.getElementById('vali')
    //建立点击事件完成功能点击后显示进行倒计时
    vail.onclick=()=>{
      let count=0
      vail.disabled='true'
      console.dir(vail);
      for(let i=30;i>=0;i--){
        count++
        setTimeout(() => {
          vail.innerHTML=i
        }, 1000*count)
      }
      setTimeout(() => {
        vail.innerHTML='获取验证码'
        vail.disabled='false'
      }, 1000*count+1)
      
    }
   
    //建立点击事件验证手机号是否被验证
    regbtn.onclick = function () {
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let result = JSON.parse(xhr.responseText);
            console.log(result);
            if(result.code==0){
              regp.innerHTML=`<span>手机号已被注册</span>`          
            }else{
              regajks();
            }
          }
        }
      }
      xhr.open("POST", "/v1/users/ph", true)
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
      xhr.send(`phone=${phone.value}&upwd=${upwd.value}`)
    }
    //建立函数验证手机号密码为空是否为空若不为空进行跳转
    function regajks(){
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            let result = JSON.parse(xhr.responseText);
            console.log(result);
            if(result.code==401){
              regp.innerHTML=`<span>电话号码不能为空</span>`   
            }else if(result.code==402){
              regwd.innerHTML=`<span>密码不能为空</span>`
            }else if(result.code==403){
              regp.innerHTML=`<span>手机号格式错误</span>`
            }else{
              window.location.href = 'lodin.html'
            }
          }
        }
      }
      xhr.open("POST", "/v1/users/reg", true)
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
      xhr.send(`phone=${phone.value}&upwd=${upwd.value}`)
    }
     //点击事件 显示骂隐藏密码
     {
      let eye=document.querySelector('.paw>.eye ')
      let count=0;
      eye.onclick=function(){
        if(count%2==0){
          eye.style.backgroundImage='url(../img/eye-on.png)'
          upwd.type='text'
        } else{
          eye.style.backgroundImage='url(../img/eye.png)'
          upwd.type='password'
        }    
        count++
      }
    }
  </script>
</body>

</html>